<template>
  <div>
    <input type="text" id="keyword" v-model="serchMap" />
    <div id="container" style="width: 800px; height: 400px"></div>
    <div id="panel"></div>
  </div>
</template>

<script>
window._AMapSecurityConfig = {
  securityJsCode: "f7788c1247236e92c1564ce6d3eee0d6",
};
export default {
  data() {
    return {
      map: null,
      serchMap: "",
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const that = this;
      this.map = new AMap.Map("container", {
        resizeEnable: false, // 是否可调整大小
      });
      AMap.plugin(["AMap.Driving"], function () {
        //构造路线导航类
        var driving = new AMap.Driving({
          map: that.map,
          panel: "panel",
        });
        driving.search(
          new AMap.LngLat(116.379028, 39.865042),
          new AMap.LngLat(116.427281, 39.903719),
          function (status, result) {
            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
            if (status === "complete") {
              console.log("绘制驾车路线完成");
            } else {
              console.log("获取驾车数据失败：" + result);
            }
          }
        );
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}

#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
}
#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>
